<template>
  <div class="bg-bg-default text-text-default min-h-screen">
    <div class="bg-blue-500 text-white p-4">
      测试 Tailwind 默认样式（应显示蓝色背景）
    </div>
    <ThemeSwitcher />
    <h2 class="text-4xl font-bold text-primary mb-4">欢迎来到 Nuxt 3!</h2>
    <p class="text-lg text-text-muted mb-8">
      这是一个使用 Nuxt 3 + Tailwind CSS 实现主题色切换的完整示例。
    </p>

    <div class="bg-bg-card p-6 rounded-lg shadow-xl">
      <h3 class="text-xl font-semibold text-text-default mb-4">主题色应用示例</h3>
      <p class="text-text-default mb-4">
        这个文本的颜色是 `text-text-default`，随着主题变化而改变。
      </p>

      <button
        class="bg-btn-primary btn-primary text-btn-primary-text px-6 py-2 rounded-full font-bold hover:opacity-80 transition-opacity duration-200">
        一个按钮
      </button>

      <div class="mt-4">
        <p class="text-status-success font-medium">这是一个成功的消息。</p>
        <p class="text-status-warning font-medium">这是一个警告消息。</p>

        <p class="text-warning font-medium">这是一个警告消息。1111</p>

        <p class="text-[var(--status-warning)]">这是一个警告消息。222222</p>

      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import ThemeSwitcher from './ThemeSwitcher.vue';
definePageMeta({
  layout: 'minimal',
  showHeader: false
});
</script>
<style>
.main-container {
  background-color: var(--bg-default);
  color: var(--text-default);
}
</style>